<template>
  <div id="time-play" v-if="time && date">
    <p class="time">{{ time }}</p>
    <p class="date">{{ date }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: null,
      date: null
    }
  },

  created() {
    this.getCurrentTime()
  },

  destroyed() {
    if (window.setTime) clearInterval(window.setTime)
  },

  methods: {
    getCurrentTime() {
      this.time = this.$baseFunc.dateFormat('HH:MM:SS', new Date())
      this.date = this.$baseFunc.dateFormat('YYYY-mm-dd WWW', new Date())

      if (window.setTime) clearInterval(window.setTime)
      window.setTime = setInterval(() => {
        this.time = this.$baseFunc.dateFormat('HH:MM:SS', new Date())
        this.date = this.$baseFunc.dateFormat('YYYY-mm-dd WWW', new Date())
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
#time-play {
  font-size: 20px;
  text-align: right;
  color: #daf6ff;
  text-shadow: 0 0 20px #daf6ff, 0 0 30px rgba(10, 175, 230, 0);
  .date {
    font-size: 14px;
  }
}
</style>
